<template>
  <el-form inline>
    <!--一级分类-->
    <el-form-item label="一级分类">
      <el-select palceholder="请选择" v-model="category1Id" :disabled="isDisabled">
        <el-option v-for="(c1,index) in categoryStore.category1List" :value="c1.id" :label="c1.name" :key="c1.id"></el-option>
      </el-select>
    </el-form-item>
    <!--二级分类-->
    <el-form-item label="二级分类">
       <el-select palceholder="请选择" v-model="category2Id" :disabled="isDisabled">
        <el-option v-for="(c2,index) in categoryStore.category2List" :value="c2.id" :label="c2.name" :key="c2.id"></el-option>
      </el-select>
    </el-form-item>
    <!--三级分类-->
    <el-form-item label="三级分类">
       <el-select palceholder="请选择" v-model="categoryStore.category3Id" :disabled="isDisabled">
        <el-option v-for="(c3,index) in categoryStore.category3List" :value="c3.id" :label="c3.name" :key="c3.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>

</template>
<script lang="ts">
export default {
  name: 'CategorySelector'
}
</script>
<script lang="ts" setup>
import { onMounted, computed } from 'vue'
// 引入分类列表数据相关的仓库
import { useCategoryStore } from '../../stores/category'
const categoryStore = useCategoryStore()
// 组件加载后直接获取一级分类的列表数据
onMounted(() => {
  categoryStore.getCategory1List()
})
// 计算属性
// 一级分类id的计算属性
const category1Id = computed<number>({
  get() {
    return categoryStore.getCategory1Id as number
  },
  set(val: number) {
    // 直接分发二级分类列表数据的action
    categoryStore.getCategory2List(val)
  }
})
// 二级分类id的计算属性
const category2Id = computed<number>({
  get() {
    return categoryStore.getCategory2Id as number
  },
  set(val: number) {
    // 直接分发二级分类列表数据的action
    categoryStore.getCategory3List(val)
  }
})
// 接收父级组件传递过来的数据
const props =defineProps({
  isDisabled:{
    type:Boolean, // 布尔类型
    default:false // 默认值
  }
})
</script>
<style scoped>
</style>